<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <script>
      /*
                一、dom

                            对于哪些"不依赖UI交互"的 原生功能，nvue将其封装成模块，这是一种通过 javascript调用原生功能的方法。

                                        ①、uni-app 默认内置集成原生模块，如：  BindingX、animation、DOM.addRule等。  通过 uni.requireNaticePlugin 引入App原生插件。

                                            eg:
                                                    // 使用方式

                                                            const PluginName = uni.requireNativePlugin(PluginName) ;  // PluginName 为原生插件名称

                                        ②、支持项目 nativeplugins 目录下和插件市场原生云打包的第三方原生插件。你可以将已有原生模块移植到nvue平台也很方便。

                                                使用方式：   在manifest.json ---App原生插件配置---选择本地插件或者云端插件---打自定义基座才能使用。

                                                详见：  https://zh.uniapp.dcloud.io/plugin/native-plugin.html


                                        ③、nvue 里不支持的 uni-app API  

                                                详见： https://zh.uniapp.dcloud.io/tutorial/nvue-api.html#nvue-%E9%87%8C%E4%B8%8D%E6%94%AF%E6%8C%81%E7%9A%84-uni-app-api

                            1、addRule

                                        Weex提供 DOM.addRule 以"加载自定义字体"。

                                        开发者可以通过指定 font-family 加载 iconfont  和  custom font . 开发者可以使用下面的代码加载自定义字体：



                                        eg：

                                                    <template>
                                                        <view>
                                                            <text class="my-iconfont">&#xe85c;</text>	
                                                        </view>
                                                    </template>
                                                    <script>
                                                        export default{
                                                            beforeCreate() {
                                                                const domModule = uni.requireNativePlugin('dom')
                                                                domModule.addRule('fontFace', {
                                                                    'fontFamily': "myIconfont",
                                                                    'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"
                                                                });
                                                            }
                                                        }
                                                    </、script>
                                                    <style>
                                                        .my-iconfont {
                                                            font-family:myIconfont;
                                                            font-size:60rpx;
                                                            color: #00AAFF;
                                                        }
                                                    </style>


                                        ★、 addRule (type,contentObject):

                                                        ①、@fontFace 协议名称，不可修改

                                                        ②、@font-family  "font-family"的名称。

                                                        ③、@src字体地址， url('') 是保留字段，其参数如下：

                                                                <1>、http. 从HTTP请求加载, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
                                                                
                                                                <2>、https. 从HTTPS请求加载, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf')

                                                                <3>、local, Android ONLY. 从assets目录读取, e.g. url('local://foo.ttf'), foo.ttf 是文件名在你的assets目录中.

                                                                <4>、file. 从本地文件读取, e.g. url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')

                                                                <5>、data. 从base64读取, e.g. url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....'), 上述data字段不全。

                                        ★、注意：

                                                    addRule方法里的 fontFamily 可以随意取。这个名字不是字体真正的名称。

                                                    字体真正的名字 (font-family),也就是注册到系统中的名字是保存在"字体二进制文件"中的。

                                                    你需要确保你使用的字体的真正的名字(font-family)足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符会被显示为"?".

                                                    如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。 确保在项目设置中，设置一个特殊的 font-family 名字。

                                                    默认是 "iconfont" ,但极大可能发生冲突。

                                                    推荐在 breforeCreate 钩子中调用 addRule方法。

                        2、scrollToElement

                                      让页面滚动到ref对应的组件，这个API只能用于可滚动组件的子节点，例如 <scroller><list>、<waterfall>等可滚动组件中。


                                     scrollToElement(ref,options):

                                            ①、@ref，要滚动到的那个节点

                                            ②、@options

                                                    offset:  一个到其为止的偏移距离，默认是0.

                                                    animated:  是否需要附带滚动效果。


                                    eg:
                                             <template>
                                                <view class="wrapper">
                                                <scroller class="scroller">
                                                    <view class="row" v-for="(name, index) in rows" :ref="'item'+index">
                                                    <text class="text" :ref="'text'+index">{{name}}</text>
                                                    </view>
                                                </scroller>
                                                <view class="group">
                                                    <text @click="goto10" class="button">Go to 10</text>
                                                    <text @click="goto20" class="button">Go to 20</text>
                                                </view>
                                                </view>
                                            </template>
                                            <script>
                                                const dom = uni.requireNativePlugin('dom')
                                                export default {
                                                data() {
                                                    return {
                                                    rows: []
                                                    }
                                                },
                                                created() {
                                                    for (let i = 0; i < 30; i++) {
                                                    this.rows.push('row ' + i)
                                                    }
                                                },
                                                methods: {
                                                    goto10(count) {
                                                    const el = this.$refs.item10[0]
                                                    dom.scrollToElement(el, {})
                                                    },
                                                    goto20(count) {
                                                    const el = this.$refs.item20[0]
                                                    dom.scrollToElement(el, {
                                                        offset: 0
                                                    })
                                                    }
                                                }
                                                }
                                            <//script>
                                            <style scoped>
                                                .scroller {
                                                width:700rpx;
                                                height:500px;
                                                border-width: 3px;
                                                border-style: solid;
                                                border-color: rgb(162, 217, 192);
                                                margin:0 25rpx;
                                                }
                                                .row {
                                                height: 100rpx;
                                                flex-direction: column;
                                                justify-content: center;
                                                padding-left: 30rpx;
                                                border-bottom-width: 2px;
                                                border-bottom-style: solid;
                                                border-bottom-color: #DDDDDD;
                                                }
                                                .text {
                                                font-size: 45rpx;
                                                color: #666666;
                                                }
                                                .group {
                                                flex-direction: row;
                                                justify-content: center;
                                                margin-top: 60rpx;
                                                }
                                                .button {
                                                width: 200rpx;
                                                padding-top: 20rpx;
                                                padding-bottom: 20rpx;
                                                font-size: 40rpx;
                                                margin-left: 30rpx;
                                                margin-right: 30rpx;
                                                text-align: center;
                                                color: #41B883;
                                                border-width: 2px;
                                                border-style: solid;
                                                border-color: rgb(162, 217, 192);
                                                background-color: rgba(162, 217, 192, 0.2);
                                                }
                                            </style>

                                https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/gite.gif


                       3、getComponentReact

                                获取某个元素view的外框


                                   getComponentReact(ref,callback)

                                        ①、@ref ,要获取外框的那个节点

                                        ②、@callback,异步方法，通过回调返回信息

                                    回调方法的数据样例：

                                         {
                                            result: true,
                                            size: {
                                                bottom: 60,
                                                height: 15,
                                                left: 0,
                                                right: 353,
                                                top: 45,
                                                width: 353
                                            }
                                        }

                                    ★、此方法需要在节点渲染后调用才能获取正确的信息，刻在 mounted 或 更新数据后 update中调用，

                                        如果想要获取到weex 视口容器的布局信息，可以指定ref为字符串 'viewport',

                                        即：  getComponentReact('viewport',callback)
            */
    </script>
  </body>
</html>